<!-- 营收结算月详情 -->
<template>
    <div>
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/revenueSettlementMonth'}">营收结算</el-breadcrumb-item>
            <el-breadcrumb-item>成交详情</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item label="楼盘名称：">
                <el-input placeholder="请输入楼盘名称" v-model.trim="ruleForm.devName" maxlength="20" size="small"></el-input>
            </el-form-item>
            <el-form-item label="项目等级：" prop="projectLevelId">
                <el-select v-model="ruleForm.projectLevelId" filterable style="width: 200px;" size="small">
                    <el-option v-for="item in levellist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开发商：" prop="developerId">
                <el-select v-model="ruleForm.developerId" filterable style="width: 200px;" size="small">
                    <el-option v-for="item in devlist"
                        :key="item.id"
                        :label="item.developerName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="success"  @click="searchList" id="monitorEnter" size="small">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 90%">
            <el-table-column label="序号" width="50" :formatter="inittotal" align="center"></el-table-column>
            <el-table-column label="楼盘名称" prop="devname" :formatter="initdevName" align="center"></el-table-column>
            <el-table-column label="开发商类型" prop="developerName" :formatter="initdeveloperName" align="center"></el-table-column>
            <el-table-column label="计提节点" prop="calNodeName" align="center">
                <template slot-scope="scope">
                    <p v-if="scope.$index == 0">———</p>
                    <p v-else>{{scope.row.calNodeName}}</p>
                </template>
            </el-table-column>
            <el-table-column label="项目等级" :formatter="initprojectLevelName"  prop="levelName" align="center"></el-table-column>
            <el-table-column label="成交套数"  prop="dealNum"  align="center">
                <template slot-scope="scope">
                    {{scope.row.dealNum | initdealNum}}
                </template>
            </el-table-column>
            <el-table-column label="营收佣金（元）"  prop="calBase" align="center">
                <template slot-scope="scope">
                 {{scope.row.calBase | initCash}}
                </template>
            </el-table-column>
            <el-table-column label="计提点数%" prop="calProportion" align="center">
                <template slot-scope="scope">
                 {{scope.row.calProportion}}
                </template>
            </el-table-column>
            <el-table-column label="营收分配明细（元）" prop="revenueAmount" align="center">
                <template slot-scope="scope">
                  {{scope.row.revenueAmount | initCash}}
                </template>
            </el-table-column>
            <el-table-column label="订单查询" align="center">
                <template slot-scope="scope">
                    <p v-if="scope.$index == 0">———</p>
                    <el-button v-else type="text" @click="seehander(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :current-page.sync="ruleForm.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="ruleForm.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="totalSize">
          </el-pagination>
        </div>

    </div>
</template>
<script>
    import api from '@/api/apiPath'
    export default {
        data () {
            return {
                ruleForm:{
                    reportMonthId:undefined,//列表数据唯一id
                    devName:undefined,//楼盘名称
                    projectLevelId:undefined,//项目等级id
                    developerId:undefined,//开发商id
                    pageNum: 0,
                    pageSize: 10,
                },
                levellist:[],
                devlist:[],
                totalSize:0,
                tableData:[],
            }
        },
        filters:{
            initdealNum(cellValue){
                if (!cellValue && cellValue !== 0) {
                    return 
                }
                if(cellValue !== 0){
                    return cellValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
                }
                if(cellValue == 0){
                    return "0"
                }
            },
            initCash(cellValue){
                if (!cellValue && cellValue !== 0) {
                    return 
                }
                if(cellValue !== 0){
                    return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
                }
                if(cellValue == 0){
                    return "0.00"
                }
            },
        },
        methods:{
            // initcalNode(row, column, cellValue, index){
            //     if(index == 0){
            //         return '———';
            //     }else {
            //         if (row.calNode == 1) {
            //              return '认购'
            //         }else if(row.calNode == 2){
            //             return '草签'
            //         }else if (row.calNode == 3) {
            //             return '回款金额'
            //         } 
            //     }
            // },
            initdeveloperName(row, column, cellValue, index){
                if(index == 0){
                    return '———';
                }else {
                    return row.developerName
                }
            },
            initprojectLevelName(row, column, cellValue, index){
                if(index == 0){
                    return '———';
                }else {
                    return row.levelName
                }
            },
            initdevName(row, column, cellValue, index){
                if(index == 0){
                    return '———';
                }else {
                    return row.devName
                }
            },
            inittotal(row, column, cellValue, index){
                if(index == 0){
                    return '合计';
                }
                return index
            },
            handleCurrentChange(){
                this.getlist()
            },
            handleSizeChange(val){
                this.ruleForm.pageSize = val
                this.getlist();
            },
            getlist(){
                this.axios.post(api.GETREMONSUMBYDEV,this.ruleForm).then((res) => {
                  if (res && res.data.code == 200) {
                        this.tableData = res.data.data.data
                        this.tableData.unshift(res.data.data.taotalData)
                        this.totalSize = res.data.data.total
                   }
                }) 
            },
            searchList(){
                this.ruleForm.pageNum = 1
                this.getlist();
            },
            seehander(row){
                this.$router.push({path:'/revenueSettlementMonthOrder',query:{month:row.month,devId:row.devId,reportMonthId:this.ruleForm.reportMonthId}})
            },
            projectlevel(){
                this.axios.post(api.PROJECTLEVEL,this.ruleForm).then((res) => {
                    if (res.data.code == 200) {
                        this.levellist = res.data.data
                    }
                })
            },
            getAllDevList(){
                this.axios.post(api.getAllDevList,{}).then((res) => {
                    if (res.data.code == 200) {
                        this.devlist = res.data.data
                    }
                })
            }
        },
        created(){
             this.ruleForm.reportMonthId = this.$route.query.standardId
             this.projectlevel()
             this.getAllDevList()
             this.getlist()
        }
    }

</script>

<style lang="stylus" scoped>
</style>